<template>
  <edit-dialog :centerDialogVisible="visible" :default-button="false" :tilte="title" @Cancel="Cancel"
     :width="width">
    <template #content>
      <div class="detail_content">
        <img class="content_img" :src="goodsObject.files ? goodsObject.files[0]?.resourceAddress : image.noImg" />
        <div class="detail_body">
          <div class="body_message">
            <div class="message_title">物品名称：</div>
            <div class="message_content">{{ goodsObject.goodsName }}</div>
          </div>
          <div class="body_message">
              <div class="message_title">物品类型：</div>
              <div class="message_content">{{ getGoodsTypeName(goodsObject.goodsType) }}</div>
            </div>
          <div class="body_message">
            <div class="message_title">保质期：</div>
            <div class="message_content">{{ goodsObject.timeLimit }}{{ goodsObject.timeLimitUnit == 'Y' ? '年' : goodsObject.timeLimitUnit == 'H' ? '小时' : goodsObject.timeLimitUnit == 'D' ? '天' : '' }}</div>
          </div>
          <div class="body_message">
            <div class="message_title">失主姓名：</div>
            <div class="message_content">{{ goodsObject.lostName }}</div>
          </div>
          <div class="body_message">
            <div class="message_title">失主电话：</div>
            <div class="message_content">{{ goodsObject.lostPhone }}</div>
          </div>
          <div class="body_message">
            <div class="message_title">遗失时间</div>
            <div class="message_content">{{ dayjs(goodsObject.lostTimeStart).format('YYYY-MM-DD HH:mm:ss') }} - {{ dayjs(goodsObject.lostTimeEnd).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div class="body_message">
            <div class="message_title">航站楼：</div>
            <div class="message_content">{{ goodsObject.lostTerminal }}</div>
          </div>
          <div class="body_message">
            <div class="message_title">具体遗失地：</div>
            <div class="message_content">{{ goodsObject.lostPlace }}</div>
          </div>
        </div>
      </div>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button class="buttonCancel" @click="Cancel">关闭</el-button>
        <el-button class="buttonRed" @click="handlerExpire">过期处置</el-button>
      </span>
    </template>
  </edit-dialog>

</template>
<script lang="ts" setup>
import editDialog from '@/components/editDialog/index.vue'
import { reactive, ref, defineProps, computed, watch } from 'vue'
import { merge } from 'lodash'
import { image } from '@/assets/index'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { useStore } from 'vuex'
import { getGoodsTypeName } from '@/utils/common'
import { disposalLostGoods } from '@/api/lose/goodsLost'
const width = ref('960px')
const title = ref('查看遗失物品')
const loading = ref(false)
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  info: {
    type: Object,
    default: null
  }
})

const store = useStore()
const userInfo = computed(() => store.state.user.userInfo)
const emit = defineEmits(['cancel', 'submit', 'show'])

interface GoodsDataFace {
  goodsName: string;
  goodsType: string;
  lostName: string;
  lostPhone: string;
  lostTime: Array<string>;
  lostTimeStart: string;
  lostTimeEnd: string;
  timeLimit: number;
  timeLimitUnit: string;
  goodsLimitTime: string;
  lostTerminal: string;
  lostPlace: string;
  files: Array<{
    enclosureContent: string;
    enclosureName: string;
    enclosureSuffix: string;
    resourceAddress: string;
    enclosureCode: string;
  }>
}

const initGoodsObject = {
  goodsName: '',
  lostTime: [],
  goodsType: '',
  lostName: '',
  lostPhone: '',
  lostTimeStart: '',
  lostTimeEnd: '',
  timeLimit: 1,
  timeLimitUnit: '',
  goodsLimitTime: '',
  lostTerminal: '',
  lostPlace: '',
  files: [],
  creator: {
    id: '',
    name: '',
    organId: '',
    organName: ''
  }
}
let goodsObject = reactive<GoodsDataFace>(initGoodsObject)
const Cancel = () => {
  Object.assign(goodsObject, initGoodsObject)
  emit('cancel')
}

/**
 * 过期处置点击事件
 */
const handlerExpire = () => {
  const params = {
    lostId: props.info.lostId,
    lastMender: {
      id: userInfo.value.userId,
      name: userInfo.value.name,
      organId: userInfo.value.organId,
      organName: userInfo.value.organName
    }
  }
  loading.value = true
  disposalLostGoods(params).then(res => {
    if (res?.code === '1') {
      ElMessage.success('处置过期成功！')
      emit('submit')
    } else {
      ElMessage.success(res?.message || '处置过期失败')
      emit('cancel')
    }
    loading.value = false
  }).catch(err => {
    ElMessage.error(err.message || '系统错误')
    loading.value = false
  })
}
watch(
  () => props.visible,
  (newVal, oldVal) => {
    if (newVal) {
      goodsObject = { ...props.info }
    }
  }
)
</script>
<style lang="less" scoped>
.detail_content {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 24px;
  padding-bottom: 0px;

  .content_img {
    width: 240px;
    height: 240px;
    border-radius: 15px;
  }

  .detail_body {
    width: auto;
    height: 240px;
    // background: rgba(238,243,255,0.56);
    border-radius: 8px;
    margin-left: 24px;
    padding-left: 24px;
    // padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;

    .body_message {
      display: flex;
      line-height: 25px;

      .message_title {
        width: 100px;
        text-align: right;
        margin-bottom: 8px;
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #989DAA;
      }
      .deliver_label{
        width: 185px;
      }
      .message_content {
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #535862;
        margin-left: 10px;
      }
    }
  }
}

.buttonCancel {
  width: 88px;
}

.buttonRed {
  width: 88px;
  color: red;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid red;
}
</style>
